<script setup lang="ts">
import { SmsType } from '@global/types'
import { ref } from 'vue'
import useForm from './useForm'
import useSms from './useSms'
const formRef = ref()
const { mode, form, loginHandler, registerHandler } = useForm({ formRef })
const { leftTime, sendSmsHandler } = useSms()
</script>

<template>
  <div class="h-full items-center justify-center flex flex-col">
    <n-form
      ref="formRef"
      :model="form"
      label-placement="left"
      label-width="140px"
      class="w-120 py-16 pr-18 pl-4 rounded shadow-lg relative overflow-hidden"
    >
      <img src="@/assets/img/bg.jpg" class="w-full h-full absolute top-0 left-0 object-cover blur-3 filter" />
      <n-form-item
        v-if="mode === 'register'"
        :label="$t('user-name')"
        path="name"
        :rule="[$rules.required($t('required-name')), $rules.min(2, $t('min-name-2'))]"
      >
        <n-input v-model:value="form.name" :maxlength="12" />
      </n-form-item>

      <n-form-item
        :label="$t('phone')"
        path="phone"
        :rule="[$rules.required($t('phone-required')), $rules.reg($Reg.phone, $t('invalid-phone'))]"
      >
        <n-input v-model:value="form.phone" :maxlength="11" />
      </n-form-item>

      <n-form-item
        v-if="mode !== 'loginPsd'"
        :label="$t('code')"
        path="code"
        :rule="[
          $rules.required($t('required-code')),
          $rules.min(6, $t('code-min-6')),
          $rules.reg($Reg.num, $t('code-is-num'))
        ]"
      >
        <div class="flex justify-between w-64">
          <n-input v-model:value="form.code" :maxlength="6" class="!w-28" />
          <n-button v-if="leftTime > 0" @click="$message.warning($t('no-frequent-operation'))">{{ leftTime }}</n-button>
          <n-button
            v-else
            :disabled="!$Reg.isPhone(form.phone)"
            @click="
              sendSmsHandler({
                phone: form.phone,
                type: mode === 'register' ? SmsType.register : SmsType.login
              })
            "
          >
            {{ $t('send-sms') }}
          </n-button>
        </div>
      </n-form-item>

      <n-form-item
        v-if="mode !== 'loginSms'"
        :label="$t('psd')"
        path="psd"
        :rule="[$rules.required($t('required-psd')), $rules.min(6, $t('psd-min-6'))]"
      >
        <n-input v-model:value="form.psd" type="password" :maxlength="12" />
      </n-form-item>

      <div class="flex justify-center space-x-10 pl-18 mt-5">
        <n-button v-show="mode === 'loginSms'" @click="mode = 'loginPsd'">{{ $t('use-psd-login') }}</n-button>
        <n-button v-show="mode === 'loginPsd'" @click="mode = 'loginSms'">{{ $t('use-sms-login') }}</n-button>
        <template v-if="mode !== 'register'">
          <!-- <n-button @click="mode = 'register'">{{ $t('go-register') }}</n-button> -->
          <n-button @click="loginHandler" @keyup.enter="loginHandler">{{ $t('login') }}</n-button>
        </template>
        <template v-else>
          <n-button @click="mode = 'loginSms'">{{ $t('go-login') }}</n-button>
          <n-button @click="registerHandler" @keyup.enter="registerHandler">{{ $t('register') }}</n-button>
        </template>
      </div>
    </n-form>
  </div>
</template>

<style scoped>
.n-form-item {
  @apply relative;
}
.n-input {
  @apply w-72 bg-white/50;
}
</style>
